<template>
  <div>
    <sn-subheader class="row row-header">
      <em slot="title">网吧管理</em>
    </sn-subheader>
    <sn-ibox>
      <sn-ibox-content>
        <sn-subheader-float>
          <template slot="left">
            <sn-filter label="应用名称">
              <sn-select
                slot="label"
                v-model="params.query"
                placeholder="筛选项"
                size="meduim"
              >
                <sn-option label="ID" :value="1"></sn-option>
                <sn-option label="名称" :value="2"></sn-option>
                <sn-option label="手机号" :value="3"></sn-option>
              </sn-select>
              <sn-input
                v-model="params.word"
                placeholder="请输入搜索内容"
              ></sn-input>
            </sn-filter>
            <sn-filter class="m-l-10" label="地区筛选">
              <sn-select v-model="params.addr" placeholder="请选择地区">
                <template v-for="(r, i) in $dict.region">
                  <sn-option
                    :key="i"
                    :label="r.ssqname"
                    :value="r.ssqname"
                  ></sn-option>
                </template>
              </sn-select>
            </sn-filter>
            <sn-filter class="m-l-10" label="添加时间">
              <sn-date-picker
                size="medium"
                v-model="date"
                type="daterange"
                :pickerOptions="pickerOptions"
              >
              </sn-date-picker>
            </sn-filter>
          </template>
          <div slot="right">
            <sn-button type="primary" size="small" @click="getList"
              >查询</sn-button
            >
            <sn-button class="m-l-10" size="small" @click="handleReset"
              >重置</sn-button
            >
          </div>
        </sn-subheader-float>
        <div class="m-t-10">
          <router-link :to="{ name: 'InternetBarAdd' }">
            <sn-button type="primary" size="small">新建网吧</sn-button>
          </router-link>
        </div>
        <sn-table class="m-t" :data="list" stripe>
          <sn-table-column fixed prop="date" label="安装包下载">
            <a href="https://gs-jr.obs.myhuaweicloud.com/dist/jr.7z" target="_blank">下载</a>
          </sn-table-column>
          <sn-table-column prop="cybercafe_id" label="ID"></sn-table-column>
          <sn-table-column prop="cybercafe_name" label="名称"></sn-table-column>
          <sn-table-column prop="cybercafe_addr" label="地址"></sn-table-column>
          <sn-table-column
            prop="expire_date"
            label="添加时间"
          ></sn-table-column>
          <sn-table-column prop="str_ip" label="IP地址"></sn-table-column>
          <sn-table-column
            prop="pc_count"
            label="激活机器数量"
          ></sn-table-column>
        </sn-table>
        <sn-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="params.limit"
          layout="total, prev, pager, next, sizes, jumper"
          :total="total_count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
        ></sn-pagination>
        <div class="note">
          <div class="note-explain">
            <p>说明：</p>
            <p>1、创建网吧后需要进行支付宝转账，付款完成后会开通特权，支付宝收款码如右图所示</p>
            <p>2、充值完成，五分钟之后系统自动开通特权，如充值中遇到需要输入全名，请输入：杜朝彬。如充值后未开通，请联系 QQ：3431284356</p>
            <p>3、支付转账时，请备注网吧名称</p>
          </div>
          <div class="note-qr-code">
            <img src="~@images/qr-code.png" alt="">
            <p>支付宝收款码</p>
          </div>
        </div>
      </sn-ibox-content>
    </sn-ibox>
  </div>
</template>

<script>
import data from "./data";
import methods from "./methods";
export default {
  name: "AgentReport",
  mixins: [data, methods],
};
</script>